<template>
    <div class="week_select_container">
        <el-dialog width="350px" title="请选择教学周" :visible.sync="state"  :show-close="true" :close-on-click-modal="false">
            <div class="opration_button txt_l">
                <el-checkbox v-model="setSingleWeekState" @change="setSingleWeek">单周</el-checkbox>
                <el-checkbox v-model="setDoubleWeekState" @change="setDoubleWeek">双周</el-checkbox>
                <el-checkbox v-model="setAllWeekState" @change="setAllWeek">全选</el-checkbox>
            </div>
            <div class="selectContainer">
                <table>
                  <tr v-for="(item,i) in weekList" :key="i">
                    <td v-for="(weekItem,index) in item" @click="changeSelect(i,index)"  :key="weekItem.id+'weekItem'" :class="weekItem.select?'current item':'item'">
                        <div class="cell">{{weekItem.teachWeek}}</div>
                    </td>
                  </tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="passParentList" type="primary" size="mini">确 定</el-button>
                <el-button @click="state = false" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props:{
            datas: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                //三个checkBox选中状态
                state:false,
                weekList:[],
                setSingleWeekState : false,
                setDoubleWeekState : false,
                setAllWeekState : false,
            }
        },
        watch: {
            'datas': function (curVal, oldVal) {
                this.weekList = curVal;
            }
        },
        created() {
        },
        mounted() {},
        methods: {
            showDialog(){
                this.state = true;
                this.setSingleWeekState = false;
                this.setDoubleWeekState = false;
                this.setAllWeekState = false;
            },
            //传入的List，格式如下
            /*[
                [
                    {teachWeek":1,"beginTime":"2017-11-30","endTime":"2017-12-03","select":false}
                 ],
                 [
                    {teachWeek":2,"beginTime":"2017-12-04","endTime":"2017-12-10","select":false}
                ]
           ]*/
            changeSelect(i,index){
                this.weekList[i][index].select = !this.weekList[i][index].select;
                // console.log(i+"--->"+index);
            },
            //回调父类接口
            /*
            {
            type:null/single/double/all
            data:[
                {"teachWeek":1,"beginTime":"2017-11-30","endTime":"2017-12-03"},
                {"teachWeek":2,"beginTime":"2017-12-04","endTime":"2017-12-10"},
                {"teachWeek":3,"beginTime":"2017-12-11","endTime":"2017-12-17"}
            ]
            }
            */
            passParentList(){
                let weekSelecttList=[];
                let weekList = this.weekList;
                for(let i=0;i<weekList.length;i++){
                    for(let j=0;j<weekList[i].length;j++){
                        if(weekList[i][j].select){
                            weekSelecttList.push({
                                teachWeek:weekList[i][j].teachWeek,
                                beginTime:weekList[i][j].beginTime,
                                endTime:weekList[i][j].endTime,
                            });
                        }
                    }
                }
                // console.log(JSON.stringify(weekSelecttList))
                let params = {
                    type:this.setSingleWeekState?'single':this.setDoubleWeekState?'double':this.setAllWeekState?'all':null,
                    data:weekSelecttList
                }
                this.state = false;
                this.$parent.putSelectWeekList(params);

            },
            //单周
            setSingleWeek(){
                this.setDoubleWeekState  = false;
                this.setAllWeekState = false;
                let weekList = this.weekList;
                for(let i=0;i<weekList.length;i++){
                    for(let j=0;j<weekList[i].length;j++){
                        if(weekList[i][j].teachWeek % 2 >0){
                            weekList[i][j].select=this.setSingleWeekState;
                        }else{
                            weekList[i][j].select=false;
                        }
                    }
                }
                this.weekList = weekList;
            },
            //双周
            setDoubleWeek(){
                this.setSingleWeekState = false;
                this.setAllWeekState = false;
                let weekList = this.weekList;
                for(let i=0;i<weekList.length;i++){
                    for(let j=0;j<weekList[i].length;j++){
                        if(weekList[i][j].teachWeek % 2 >0){
                            weekList[i][j].select=false;
                        }else{
                            weekList[i][j].select=this.setDoubleWeekState;
                        }
                    }
                }
                this.weekList = weekList;
            },
            //全选
            setAllWeek(){
                this.setSingleWeekState = false;
                this.setDoubleWeekState  = false;
                let weekList = this.weekList;
                for(let i=0;i<weekList.length;i++){
                    for(let j=0;j<weekList[i].length;j++){
                            weekList[i][j].select=this.setAllWeekState;
                    }
                }
                this.weekList = weekList;
            }
        },
        components: {

        }
    };
</script>
<style>
.week_select_container .el-dialog{
    width:350px;
    min-width:300px;
}
.week_select_container .el-dialog__body{
    padding:20px;
    text-align: center;
}
.week_select_container .el-dialog__body .cell{
    width: 17px;
    height: 35px;
    text-align: center;
    overflow: hidden;
}

.selectContainer{
    display: inline-block;
    border: 1px solid #00BBBD;
}
.selectContainer .current{
    background-color: #ffbb00;
    color:#fff;
}
.selectContainer .item{
    padding:0 9px;
    height:30px;
    text-align: center;
}
.opration_button{
    margin: 10px 27px;
}
.txt_l{
    text-align: left;
}
.txt_r{
    text-align: center;
}
</style>